<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>在线绘制流程</title>
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="css/diagram-js.css" />
  <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
  <link rel="stylesheet" href="css/app.css" />

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

  <style>
    .item {
      display: none;
      cursor: pointer;
    }

    .bjs-powered-by {
      display: none;
    }

    .buttons>li {
      /* display: inline-block; */
      margin-right: 10px;
      height: 26px;
      line-height: 26px;
      float: left;
    }

    .buttons>li>a.btn {
      background: #00BCD4;
      border: none;
      outline: none;
      padding: 0px 10px;
      color: #fff;
      display: inline-block;
      opacity: 1;
      height: 26px;
      font-size: 14px;
      line-height: 26px;
    }

    .label {
      background: #00BCD4;
      border: none;
      outline: none;
      padding: 0px 10px;
      color: #fff;
      display: inline-block;
      cursor: pointer;
      opacity: 1;
      height: 26px;
      font-size: 14px;
      line-height: 26px;
    }

    .sy-mask {
      width: 100%;
      height: 100%;
      position: fixed;
      background: rgba(0, 0, 0, 0.8);
      left: 0;
      top: 0;
      z-index: 1000;
      display: none;
    }

    .sy-alert {
      position: fixed;
      display: none;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
      width: 300px;
      max-width: 90%;
      max-height: 80%;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 9999
    }

    .sy-alert.animated {
      -webkit-animation-duration: .3s;
      animation-duration: .3s
    }

    .sy-alert .sy-title {
      height: 45px;
      color: #333;
      line-height: 45px;
      font-size: 15px;
      border-bottom: 1px solid #eee;
      padding: 0 12px
    }

    .sy-alert .sy-content {
      padding: 20px;
      text-align: center;
      font-size: 14px;
      line-height: 24px;
      color: #666;
      overflow-y: auto
    }

    .sy-alert .sy-btn {
      height: 50%;
      border-top: 1px solid #eee;
      overflow: hidden
    }

    .sy-alert .sy-btn button {
      float: left;
      border: 0;
      color: #333;
      cursor: pointer;
      background: #fff;
      width: 50%;
      line-height: 45px;
      font-size: 15px;
      text-align: center
    }

    .sy-alert .sy-btn button:nth-child(1) {
      color: #888;
      border-right: 1px solid #eee
    }

    .sy-alert.sy-alert-alert .sy-btn button {
      float: none;
      width: 100%
    }

    .sy-alert.sy-alert-tips {
      text-align: center;
      width: 150px;
      background: rgba(0, 0, 0, 0.7)
    }

    .sy-alert.sy-alert-tips .sy-content {
      padding: 8px;
      color: #fff;
      font-size: 14px
    }

    .sy-alert.sy-alert-model .sy-content {
      text-align: left
    }

    .sy-alert.sy-alert-model .sy-content .form .input-item {
      margin-bottom: 12px;
      position: relative
    }

    .sy-alert.sy-alert-model .sy-content .form .input-item input {
      display: block;
      position: relative;
      width: 100%;
      border: 1px solid #eee;
      padding: 10px
    }

    .sy-alert.sy-alert-model .sy-content .form .input-item .getcode {
      border: 0;
      top: 0;
      right: 0;
      position: absolute;
      background: 0;
      line-height: 37px;
      color: #f60;
      width: 100px;
      text-align: center
    }
  </style>
</head>

<body>
  <div class="content with-diagram" id="js-drop-zone">
    <div class="message error">
      <div class="note">
        <p>无法显示bpms2.0</p>
        <div class="details">
          <span>错误详细信息</span>
          <pre></pre>
        </div>
      </div>
    </div>
    <div class="canvas" id="js-canvas"></div>
    <div class="properties-panel-parent" id="js-properties-panel"></div>
  </div>
  <ul class="buttons">
    <li class="item upload">
      <form id="form1" name="myForm" onsubmit="return false" method="post" enctype="multipart/form-data" title="上传文件">
        <input type="file" name="uploadFile" id="uploadFile" accept=".bpmn" style="display: none">
        <label class="label" for="uploadFile">导入</label>
      </form>
    </li>
    <li class="item download">
      <a class="btn" href id="downloadBpmn">导出</a>
    </li>
    <li class="item submit">
      <a class="btn" id="js-download-diagram">
        部署
      </a>
    </li>
  </ul>
  <div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true"
    id="alert">
    <div class="sy-title">部署流程</div>
    <div class="sy-content">
      确认是否部署该流程
      <!--    <div class="form">-->
      <!--      <p class="input-item"><input id="deploymentName" type="text" placeholder="请输入流程名称"></p>-->
      <!--    </div>-->
    </div>
    <div class="sy-btn">
      <button id="sure">确定</button>
      <button class="cancel">取消</button>
    </div>
  </div>
  <div class="sy-mask cancel"></div>

  <!-- singleUserModal -->
  <div class="modal fade" id="singleUserModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">请选择人员</h5>
        </div>
        <div class="modal-body">
          <div class="list-group" id="singleUserList" role="tablist">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
            onclick="singleUserDlgCancel()">取消</button>
          <button type="button" class="btn btn-primary" onclick="singleUserDlgConfirm()">确认</button>
        </div>
      </div>
    </div>
  </div>

  <!-- singleGroupModal -->
  <div class="modal fade" id="singleGroupModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">请选择岗位</h5>
        </div>
        <div class="modal-body">
          <div class="list-group" id="singleGroupList" role="tablist">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
            onclick="singleGroupDlgCancel()">取消</button>
          <button type="button" class="btn btn-primary" onclick="singleGroupDlgConfirm()">确认</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="index.js"></script>
</body>

</html>